<template>
	<div class="bg-[#fff] pt-0">
		<div class="carousel-container">
			<div>
				<el-carousel ref="carousel" class="w-full" :height="bannerHeight + 'px'">
					<el-carousel-item v-for="item in top" :key="item.litpic">
						<img v-lazy="img + item.litpic" class="!w-full h-full" alt="" />
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>
		<div class="py-14 mx-auto gap-10 max-md:gap-0 grid grid-cols-2 max-md:p-3 max-md:grid-cols-1" data-aos="fade-up">
			<div class="col-span-1 grid grid-cols-3 max-md:grid-cols-1">
				<div class="flex col-span-1"></div>
				<div class="col-span-2 max-md:p-6 p-10">
					<img class="aspect-auto" v-lazy="middle[3] && img + middle[3].litpic" alt="" />
				</div>
			</div>
			<div class="flex flex-col col-span-1 justify-around max-md:gap-5 overflow-hidden">
				<span class="font-bold text-[#C1A879] text-5xl max-md:text-base whitespace-nowrap">{{ my_introduce.ptypename }}</span>
				<p class="text-gray-500 w-4/5 hidden-5 max-md:w-full overflow-hidden" v-html="my_introduce.content"></p>

				<div class="block">
					<span @click="guanyu" class="bg-[#C1A879] px-6 py-2 text-white rounded-full inline-block">{{
						lg === 0 ? "Learn more" : lg === 1 ? "了解详情" : "了解詳情"
					}}</span>
				</div>
			</div>
		</div>

		<!-- 新闻中心 -->
		<!-- 	http://hxyh.syudao.com/public/upload/other/20181022/7b3e10bcba8336aea60eb7fbc7c42382.jpg -->
		<!--   -->
		<div
			class="bg-no-repeat bg-center bg-cover py-14"
			:style="{ backgroundImage: `url('${img}${middle[2] && middle[2].litpic}')` }"
			v-if="middle && middle[2] && middle[2].litpic"
		>
			<div
				data-aos="fade-up"
				class="container mx-auto flex flex-col justify-center items-center text-gray-500 p-14 gap-6 max-md:p-3 max-md:grid-cols-1"
			>
				<span class="text-[#C1A879] text-5xl font-bold max-md:text-base" data-aos="fade-up">NEWS </span>
				<span class="text-white" data-aos="fade-up">{{ lg === 0 ? "News trends" : lg === 1 ? "新闻动态" : "新聞動態" }}</span>
				<div
					class="grid grid-cols-3 grid-rows-3 gap-6 max-md:gap-y-5 max-md:gap-0 w-full h-full grid-flow-row-dense max-md:grid-cols-1"
					data-aos="fade-up"
				>
					<div
						class="col-span-2 row-span-1 bg-white flex group duration-300 transition-all cursor-pointer"
						@click="goto_new(i)"
						v-for="(i, index) in news.slice(0, 3)"
						:key="index"
					>
						<div class="h-full aspect-square bg-[#E5E5E5] flex flex-col p-5 gap-3 justify-center items-center group-hover:bg-[#C1A879]">
							<span class="font-bold group-hover:text-white text-[#C1A879] text-5xl max-md:text-2xl">{{ i.update_time | formatTime1 }}</span>
							<span class="text-[#C1A879] group-hover:text-white">{{ i.update_time | formatTime2 }}</span>
						</div>
						<div class="col-span-4 flex-col flex p-5 justify-between group-hover:bg-black w-full">
							<p class="hidden-1 text-base text-black font-bold group-hover:text-white">{{ i.title }}</p>
							<p class="hidden-2 text-gray-500 max-md:hidden-1 group-hover:text-white">{{ i.seo_description }}</p>
						</div>
					</div>

					<div
						class="col-span-1 row-span-3 h-full p-5 gap-5 flex flex-col bg-[#C1A879] text-white w-full cursor-pointer"
						v-if="news[3]"
						@click="goto_new(news[3])"
					>
						<div class="aspect-video overflow-hidden">
							<img v-lazy="img + news[3].litpic" class="w-full h-full duration-300 transition-all hover:scale-125" alt="" />
						</div>
						<span>{{ news[3].title }}</span>
						<span>{{ news[3].update_time | formatTime }}</span>
						<p class="hidden-3">
							{{ news[3].seo_description }}
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- 我的产品 -->
		<div class="bg-[#EFEFEF]">
			<div class="container mx-auto flex flex-col justify-center items-center text-gray-500 p-14 gap-6 max-md:p-3" data-aos="fade-up">
				<span class="text-[#C1A879] text-5xl font-bold max-md:text-base" data-aos="fade-up"
					>{{ lg === 0 ? "My product" : lg === 1 ? "我的产品" : "我的產品" }} PRODUCT
				</span>
				<span data-aos="fade-up">{{ lg === 0 ? "Product center" : lg === 1 ? "产品中心" : "產品中心" }}</span>
				<div class="grid grid-cols-4 max-md:grid-cols-2 gap-6" ddata-aos="fade-up">
					<div
						v-for="(i, index) in product"
						:key="index"
						@click="goto_goods(i)"
						class="group cursor-pointer text-gray-500 gap-2 flex justify-center flex-col items-center rounded-md bg-white hover:shadow-md hover:-translate-y-5 duration-300"
					>
						<div class="w-full aspect-square overflow-hidden">
							<img v-lazy="img + i.litpic" class="w-full aspect-square transition-all duration-300 group-hover:scale-125" alt="" />
						</div>
						<div class="p-4 flex flex-col gap-2">
							<span>{{ i.title }}</span>
							<!-- <p class="hidden-2">{{ i.seo_description.slice(0, 150) }}</p> -->
						</div>
					</div>
				</div>
				<div class="mt-5" data-aos="fade-up">
					<span class="bg-[#C1A879] px-6 py-2 text-white rounded-full" @click="gotoGoods"
						>{{ lg === 0 ? "Learn more" : lg === 1 ? "了解详情" : "了解詳情" }}
					</span>
				</div>
			</div>
		</div>

		<!-- 我们的理念 -->
		<div class="container mx-auto flex flex-col justify-center items-center text-gray-500 p-14 gap-6 max-md:p-3" data-aos="fade-up">
			<span class="text-[#C1A879] text-5xl font-bold max-md:text-base">{{ my_idea.englist_name }}</span>
			<span>{{ my_idea.ptypename }}</span>
			<p class="w-2/3 max-md:w-3/4 text-center overflow-hidden" v-html="my_idea.content"></p>
			<img v-lazy="middle[1] && img + middle[1].litpic" class="aspect-auto" style="width: 920px" alt="" />
		</div>
		<!-- 联系我们 -->
		<!-- 		-->
		<div
			class="bg-no-repeat bg-center bg-cover py-14 h-[450px] max-md:h-[300px]"
			v-if="middle && middle[0] && middle[0].litpic && img"
			:style="{ backgroundImage: `url('${img}${middle[0] && middle[0].litpic}')` }"
		>
			<div class="container mx-auto grid grid-cols-3 h-full max-md:grid-cols-1 max-md:px-5">
				<div class="col-span-1 max-md:hidden"></div>
				<div class="col-span-1 max-md:hidden"></div>
				<div class="col-span-1 flex flex-col text-white justify-center gap-2 text-xl h-full max-md:text-base" data-aos="fade-up">
					<span class="text-2xl max-md:text-lg"> {{ lg === 0 ? "Contact us" : lg === 1 ? "联系我们" : "聯繫我們" }} </span>
					<!-- <span>{{ lg ? "传真" : "fax" }}：{{ $store.state.web_attr.fax }}</span> -->

					<span>{{ lg === 0 ? "tel" : lg === 1 ? "电话" : "電話" }}：{{ $store.state.web_attr.tel }} </span>
					<span>{{ lg === 0 ? "email" : lg === 1 ? "邮箱" : "郵箱" }}：{{ $store.state.web_attr.email }} </span>
					<span>Q Q：{{ $store.state.web_attr.QQ }} </span>
					<span> {{ lg === 0 ? "address" : lg === 1 ? "地址" : "地址" }}：{{ $store.state.web_attr.address }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			top: [],
			middle: [],
			web_attr: {},
			my_idea: {},
			my_introduce: {},
			news: [],
			product: [],
			bannerHeight: 0,
			image: ""
		};
	},
	created() {
		this.image = this.img;
		console.log("this.image==> ", this.image);
		// 首次加载时,初始化高度
		this.screenWidth = window.innerWidth;
		this.bannerHeight = (600 / 1550) * this.screenWidth;
		// 窗口大小发生改变
		window.onresize = () => {
			this.screenWidth = window.innerWidth;
			this.bannerHeight = (600 / 1550) * this.screenWidth;
		};

		this.ad();

		this.index();
	},
	beforeDestroy() {
		window.onscroll = null;
		// clearInterval(this.timer);
	},

	methods: {
		async goto_goods(e) {
			this.$router.push(`/goods_detail?typeid=${e.typeid}&aid=${e.aid}&lang=${this.lg ? "cn" : "en"}`);
		},
		async goto_new(e) {
			this.$router.push(`/new_detail?typeid=${e.typeid}&aid=${e.aid}&lang=${this.lg ? "cn" : "en"}`);
		},
		gotoGoods() {
			this.$router.push(`/goods?lang=${this.lg ? "cn" : "en"}`);
		},
		guanyu() {
			this.$router.push(`/guanyu?typeid=${this.my_introduce.id}&lang=${this.lg ? "cn" : "en"}`);
		},
		async index() {
			// let data = {
			// 	m: this.name,
			// 	attr_2: this.number,
			// 	typeid: 5
			// };

			// var queryString = "?" + new URLSearchParams(data).toString();

			const [err, res] = await this.$to(this.$axios.get("&a=index"));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			this.my_idea = res.data.my_idea;
			this.my_introduce = res.data.my_introduce;
			this.news = res.data.new;
			this.product = res.data.product;
			this.$store.commit("set_my_introduce", res.data.my_introduce);
		},
		async ad() {
			// let data = {
			// 	m: this.name,
			// 	attr_2: this.number,
			// 	typeid: 5
			// };

			// var queryString = "?" + new URLSearchParams(data).toString();

			const [err, res] = await this.$to(this.$axios.get("&a=ad"));
			if (err) return this.$message.error(err);
			if (res.code == 0) return this.$message.error(res.msg);
			this.top = res.data.top;
			this.middle = res.data.middle;
		},

		goTo(index) {
			this.currentIndex = index;
			const carouselList = document.querySelector(".carousel-list");
			if (carouselList) {
				this.translateX = -index * carouselList.offsetWidth;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.carousel-container {
	width: 100%;
	overflow: hidden;
}

.carousel-list {
	list-style: none;
	display: flex;
	transition: transform 0.5s ease;
}
/deep/.el-carousel__container {
	height: 850px;

	display: grid;
	flex-direction: column;
}

.carousel-item {
	// height: 800px;
	flex: 0 0 100%;
}

.carousel-dots {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.carousel-dots li {
	width: 20px;
	height: 2px;
	background-color: #ccc;
	margin: 0 5px;
	cursor: pointer;
}

.carousel-dots li.active {
	// background-color: #000;
}
.carousel-item {
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
</style>
